<template>
  <div class="medical-kiosk-home">
    <!-- 顶部标题栏 -->
    <van-nav-bar :title="config.title || '医疗自助服务终端'" fixed placeholder />

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 欢迎信息 -->
      <div class="welcome-section">
        <h2>{{ config.welcomeTitle || '欢迎使用医疗自助服务' }}</h2>
        <p>{{ config.welcomeSubtitle || '请选择您需要的服务' }}</p>
      </div>

      <!-- 动态功能模块 -->
      <div class="module-grid">
        <div v-for="module in mockApiResponse" :key="module.id" class="module-card" @click="goToModule(module.path)">
          <div class="module-icon">
            <van-icon :name="module.icon" size="40" />
          </div>
          <h3>{{ module.title }}</h3>
          <p>{{ module.funcName }}</p>
        </div>
      </div>

      <!-- 底部帮助信息 -->
      <div class="help-section" v-if="config.showHelp">
        <van-button type="primary" block @click="showHelp">
          <van-icon name="question-o" /> {{ config.helpText || '使用帮助' }}
        </van-button>
      </div>
    </div>

    <!-- 帮助对话框 -->
    <van-dialog v-model:show="showHelpDialog" :title="config.helpTitle || '使用帮助'">
      <div class="help-content">
        <p v-for="(item, index) in helpContent" :key="index">{{ item }}</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
let { proxy }: any = getCurrentInstance();
const router = useRouter()
const showHelpDialog = ref(false)

// 默认配置
const defaultConfig = {
  title: '医疗自助服务终端',
  welcomeTitle: '欢迎使用医疗自助服务',
  welcomeSubtitle: '请选择您需要的服务',
  showHelp: true,
  helpText: '使用帮助',
  helpTitle: '使用帮助',
  helpContent: [
    '1. 按照屏幕提示操作',
    '2. 如需帮助，请联系工作人员',
    '服务电话: 123-4567890'
  ],
  modules: [
    {
      id: 1,
      title: '挂号预约',
      funcName: '门诊挂号/预约专家',
      icon: 'notes-o',
      path: '/registration',
      enabled: true
    },
    {
      id: 2,
      title: '缴费服务',
      funcName: '门诊/住院费用缴纳',
      icon: 'cash-back-record',
      path: '/payment',
      enabled: true
    },
    {
      id: 3,
      title: '报告查询',
      funcName: '检查检验结果查询',
      icon: 'description',
      path: '/report',
      enabled: true
    },
    {
      id: 4,
      title: '医保服务',
      funcName: '医保结算/查询',
      icon: 'shield-o',
      path: '/insurance',
      enabled: true
    }
  ]
}

defineExpose({
  findBarcodeList,
  initParm
});

// 配置数据 - 可以从API获取或本地配置
const config = ref({ ...defaultConfig })

// 帮助内容处理
const helpContent = computed(() => {
  return Array.isArray(config.value.helpContent)
    ? config.value.helpContent
    : defaultConfig.helpContent
})

// 动态获取启用的模块
const activeModules = computed(() => {
  return config.value.modules.filter(module => module.enabled)
})

// 跳转到模块对应页面
const goToModule = (path: any) => {
  router.push(path)
}

// 显示帮助对话框
const showHelp = () => {
  showHelpDialog.value = true
}

let mockApiResponse: any = reactive([]); //table列表数据

function initParm(rows: any){
  mockApiResponse.length = 0;
  Object.assign(mockApiResponse, rows);
}


function findBarcodeList(suid: any) {
  mockApiResponse.length = 0;
  const url = '/self/machineFunction/findMachineFunction/' + suid;
  proxy.$http
    .get(url)
    .then((res: any) => {
      mockApiResponse.push(...res.data);
      console.log('mockApiResponse', mockApiResponse);

      config.value = {
        ...defaultConfig,
        ...mockApiResponse
      }
      console.log('config.value', config.value);

    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}


// 模拟从API获取配置
const fetchConfig = async () => {
  try {

    // 这里可以替换为实际的API调用
    // const response = await fetch('/api/config')
    // const data = await response.json()

    // 模拟API返回的数据
    // const mockApiResponse = {
    //   // 可以只返回需要覆盖的配置项
    //   title: 'XX医院自助服务终端',
    //   modules: [
    //     {
    //       id: 1,
    //       enabled: true
    //     },
    //     {
    //       id: 2,
    //       enabled: true
    //     },
    //     {
    //       id: 3,
    //       enabled: false // 禁用报告查询模块
    //     },
    //     {
    //       id: 4,
    //       enabled: true
    //     },
    //     {
    //       id: 5,
    //       title: '病历查询',
    //       description: '个人病历记录查询',
    //       icon: 'bookmark-o',
    //       path: '/medical-record',
    //       enabled: true
    //     }
    //   ]
    // }

    // 合并配置
    config.value = {
      ...defaultConfig,
      ...mockApiResponse
    }
  } catch (error) {
    console.error('获取配置失败:', error)
    // 使用默认配置
    config.value = { ...defaultConfig }
  }
}

// 组件挂载时获取配置
onMounted(() => {
  //fetchConfig()
})
</script>

<style scoped>
.medical-kiosk-home {
  height: 100vh;
  background-color: #f5f5f5;
  background-image: url('../../../assets/images/bj.jpg');
  /* 背景图路径（需替换为实际图片地址） */
  background-size: cover;
  /* 覆盖整个容器 */
  background-position: center;
  /* 背景图居中 */
  background-repeat: no-repeat;
  /* 禁止重复 */
}

.main-content {
  padding: 16px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.welcome-section h2 {
  color: #1989fa;
  margin-bottom: 8px;
}

.welcome-section p {
  color: #666;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}

.module-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.module-card:active {
  transform: scale(0.98);
}

.module-icon {
  margin-bottom: 10px;
  color: #1989fa;
}

.module-card h3 {
  margin-bottom: 5px;
  color: #333;
}

.module-card p {
  color: #666;
  font-size: 14px;
}

.help-section {
  margin-top: 20px;
  color: #fff;
  /* 字体颜色设为白色 */
}

.help-content {
  padding: 20px;
  line-height: 1.6;
  color: #fff;
  /* 字体颜色设为白色 */
}

/* 响应式调整 - 如果只有单数模块，最后一个模块居中 */
.module-card:last-child:nth-child(2n+1) {
  grid-column: 1 / -1;
  /* 占据整行 */
  min-width: 40%;
  /* 设置最低宽度 */
  max-width: 50%;
  /* 限制宽度（可自定义） */
  margin: 0 auto;
  /* 水平居中 */
}</style>